<template>
    
  <div class="border-bottom px-3 py-2 file-list" @click="clickEvent">
    <Row>
      <Col span="12" class="d-flex align-items-center">
        <Checkbox
          class="mb-0 mr-3"
          v-model="item.checked"
          @on-change="onChange"
        ></Checkbox>
        <i class="iconfont mr-3" :class="icons" style="font-size: 28px"></i>
        <span class="smll" style="font-size: 12px">{{ item.name }}</span>
        <div class="text-primary ml-auto hide">
          <Tooltip content="分享" placement="bottom">
            <Icon type="md-share" size="18" class="mr-2" />
          </Tooltip>
          <Tooltip content="下载" placement="bottom">
            <Icon type="md-cloud-download" size="18" class="mr-2" />
          </Tooltip>
          <Dropdown>
            <Icon type="ios-more" size="18" class="mr-2" />
            <DropdownMenu slot="list">
              <!-- 必须要在click后面加.native不然绑定的事件不会触发 -->
              <DropdownItem @click.native="rename">重命名</DropdownItem>
              <DropdownItem @click.native="deleteItem">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Col>
      <Col span="6" class="d-flex align-items-center">--</Col>
      <Col span="6" class="d-flex align-items-center">{{
        item.create_time
      }}</Col>
    </Row>
  </div>
</template>

<script>
let icons = {
  dir: {
    icon: "icon-file-b-2",
    color: "text-warning",
  },
  image: {
    icon: "icon-file-b-6",
    color: "text-success",
  },
  video: {
    icon: "icon-file-b-9",
    color: "text-primary",
  },
  text: {
    icon: "icon-file-s-7",
    color: "text-info",
  },
  none: {
    icon: "icon-file-b-8",
    color: "text-muted",
  },
};
export default {
  props: {
    item: Object,
    index: [Number, String],
  },
  name: "",
  data() {
    return {};
  },
  computed: {
    icons() {
      let o = icons[this.item.type];
      return `${o.icon} ${o.color}`;
    },
  },
  methods: {
    //   删除
    deleteItem() {
      this.$Modal.warning({
        title: "提示",
        content: "是否要删除当前选中?",
        onOk: () => {
          //   console.log(this.item, this.index);
          this.$emit("on-event", {
            type: "delete",
            item: this.item,
            index: this.index,
          });
          //   this.$Message.info("Clicked ok");
        },
      });
    },
    // 全选
    onChange(e) {
      this.$emit("on-event", {
        type: "checked",
        index: this.index,
        value: e,
      });
    },
    //重命名
    rename() {
      this.value = this.item.name;
      this.$Modal.confirm({
        render: (h) => {
          return h("Input", {
            props: {
              value: this.value,
              autofocus: true,
              placeholder: "请填写新名称...",
            },
            on: {
              input: (val) => {
                console.log(val);
                this.value = val;
              },
            },
          });
        },
        onOk: () => {
          this.$emit("on-event", {
            type: "rename",
            index: this.index,
            value: this.value,
          });
        },
      });
    },
    // 图片预览
    clickEvent() {
      if (this.item.type === "image") {
        this.$emit("on-event", {
          type: "image",
          url: this.item.url,
        });
      }
    },
  },
};
</script>

<style scoped>
.file-list:hover {
  background-color: rgba(45, 140, 240, 0.1);
}

.hide {
  display: none;
}

.file-list:hover .hide {
  display: flex;
}
</style>
